<template>
    <div class="app-container">
        <el-row class="sysImageZt">
            <el-col :span="3">
                <el-menu class="el-menu-vertical-demo" default-active="按钮">
                    <el-submenu class="submenuClass" index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ $t('scada.gallery.309456-0') }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="dict in dict.type.sys_image_type" :key="dict.value" :index="dict.value"
                                :label="dict.label" :value="dict.value" @click="handleClick(dict.value)">{{
                                    language === 'en-US' ? dict.raw.dictLabel_en_US : dict.value
                                }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="21">
                <el-card style="margin-left: 10px">
                    <el-form v-if="isHide" v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams"
                        label-width="68px">
                        <el-form-item :label="$t('scada.gallery.309456-1')" prop="moduleName">
                            <el-input v-model="queryParams.fileName" clearable
                                :placeholder="$t('scada.gallery.309456-2')" size="small"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button v-hasPermi="['zutai:sysImageZt:list']" icon="el-icon-search" size="mini"
                                type="primary" @click="handleQuery">{{ $t('search') }}
                            </el-button>
                            <el-button v-hasPermi="['zutai:sysImageZt:list']" icon="el-icon-refresh" size="mini"
                                @click="resetQuery">
                                {{ $t('reset') }}
                            </el-button>
                            <el-dropdown @command="(command) => handleCommand1(command)" style="margin-left: 10px">
                                <el-button v-hasPermi="['ghxx:bVueComponent:assignment']" plain size="mini"
                                    type="primary" style="margin-right: 20px">
                                    {{ $t('index.zutai.20250324-16') }}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-hasPermi="['iot:zutai:assignment']" command="handleSelectAllot">
                                        {{ $t('index.zutai.20250324-4') }}
                                    </el-dropdown-item>
                                    <!--                    <el-dropdown-item command="handleImportAllot">导入分配</el-dropdown-item>-->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card style="margin: 10px">
                    <el-row :gutter="10" class="mb8">
                        <el-col v-if="isHide" :span="1.5">
                            <el-upload ref="upload" :action="upload.uploadUrl" :before-remove="beforeRemove"
                                :before-upload="beforeUpload" :file-list="upload.imageList" :headers="upload.headers"
                                :limit="500" :on-exceed="handleExceed" :on-preview="handlePreview"
                                :on-remove="handleRemove" :on-success="handleAvatarSuccess" :show-file-list="false"
                                class="upload-demo" multiple>
                                <el-button v-hasPermi="['zutai:sysImageZt:upload']" size="mini" type="primary"
                                    @click="uploadFile"><i class="el-icon-upload el-icon--right" />{{
                                        $t('index.zutai.20250324-17')
                                    }}
                                </el-button>
                            </el-upload>
                        </el-col>
                        <el-col v-if="isHide" :span="1.5">
                            <el-button v-hasPermi="['zutai:sysImageZt:delete']" :disabled="multiple"
                                icon="el-icon-delete" size="mini" type="danger" @click="handleDelete">{{ $t('del') }}
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button v-hasPermi="['zutai:sysImageZt:update']" :disabled="multiple" icon="el-icon-edit"
                                size="mini" type="success" @click="handleChoice">{{ $t('update') }}
                            </el-button>
                        </el-col>
                    </el-row>
                    <div style="margin-top: 10px">
                        <el-radio-group v-model="selectImageRadio" @change="radioChange">
                            <el-card v-for="item in uploadList" :key="item.id" :body-style="{ padding: '5px' }"
                                :style="boxCard">
                                <img :src="baseApi + item.resourceUrl" class="cardImage">
                                <div style="padding: 5px;text-align:left;">
                                    <span style="font-size:11px;">{{ item.fileName }}</span>
                                    <el-radio :label="item.id" class="selectRadioText"><span v-show="false">{{
                                        $t('scada.gallery.309456-4') }}</span></el-radio>
                                </div>
                            </el-card>
                        </el-radio-group>
                    </div>
                    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page-size="5"
                        :page-sizes="[18, 27, 54]" :page.sync="queryParams.pageNum" :total="total"
                        @pagination="getList" />
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="dialogVisible" :title="$t('update')" width="25%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item :label="$t('index.zutai.20250324-18')">
                    <el-select v-model="form.moduleName" filterable :placeholder="$t('index.VarTemp.20250324-34')"
                        style="width: 100%;">
                        <el-option v-for="item in dict.type.sys_image_type" :key="item.value" :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('topo.components.topoProperties.038495-8')">
                    <el-input v-model="form.fileName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
                <el-button type="primary" @click="updateHandleClick">{{ $t('confirm') }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listUpload, getUpload, delUpload, addUpload, updateUpload, exportUpload } from "@/views/zutai/api/zutai/upload";
import { getToken } from "@/utils/auth";
import { Message } from "element-ui";

export default {
    name: "Upload",
    dicts: ['sys_image_type'],
    props: {
        moduleName: String,
        message: String,
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: false,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 上传信息表格数据
            uploadList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 27,
                deptIdStrs: null,
                moduleName: "",
                fileName: "",
                moduleGuid: "云组态",
                resourceUrl: null,
                orderByColumn: "id",
                isAsc: "desc"
            },
            upload: {
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                uploadUrl: "",
                imageList: [],
            },
            baseApi: process.env.VUE_APP_BASE_API,
            //baseApi:'http://106.14.5.188:17261/prod-api',
            imageUrl: '',
            selectionImage: {},
            isHide: true,
            isHideImage: true,

            //组态
            boxCard: {
                width: '150px',
                height: 'auto',
                marginRight: '5px',
                display: 'inline-block',
            },
            selectImageRadio: null,
            dialogVisible: false,
            form: {},
            language: this.$store.state.settings.language
        }
    },
    created() {
        console.log(this.moduleName);
    },
    mounted() {
        if (this.message != undefined) {
            this.isHide = false;
            this.isHideImage = false;
            this.isHideImage = true;
        }
        this.queryParams.moduleName = '按钮'
        this.getList()
    },
    methods: {
        radioChange() {
            this.multiple = false;
        },
        handleClick(label) {
            this.queryParams.moduleName = label;
            this.multiple = true;
            this.getList();
        },
        handleChoice() {
            //this.$message('选择图标'+this.selectImageRadio);
            //this.$parent.$parent.handleChoice(this.selectionImage);
            this.dialogVisible = true;
        },
        updateHandleClick() {
            this.form.id = this.selectImageRadio;
            updateUpload(this.form).then(response => {
                Message.success("修改成功")
                this.dialogVisible = false;
                this.getList();
            });
        },
        /** 查询上传信息列表 */
        getList() {
            this.loading = true;
            listUpload(this.queryParams).then(response => {
                this.uploadList = response.rows;
                this.total = response.total
                this.loading = false;
                this.selectImageRadio = null;

            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.fileName = "";
            this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDelete() {
            const ids = this.selectImageRadio
            this.$confirm('是否确认删除此图标组件么？', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delUpload(ids);
            }).then(() => {
                this.getList();
                Message.success("删除成功")
            })
        },
        uploadFile() {
            this.upload.uploadUrl = process.env.VUE_APP_BASE_API + "/zutai/upload/uploadData" + "?isMultiple=true&moduleGuid=云组态&moduleName=" + this.queryParams.moduleName;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            console.log(files)
            console.log(fileList)
        },
        beforeUpload(file) {
            console.log("上传前")
            if (this.queryParams.moduleName == '') {
                this.$message({
                    message: '请选择左侧上传的类型',
                    type: 'warning'
                });
                this.$refs.upload.abort();
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isLt2M;
        },
        beforeRemove(file, fileList) {

        },
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                Message.success("上传成功")
                this.getList();
                this.$refs.upload.clearFiles()
            } else {
                this.msgSuccess(res.msg);
            }
        },
        // 分配组件更多操作触发
        handleCommand1(command) {
            switch (command) {
                case 'handleSelectAllot':
                    this.handleSelectAllot();
                    break;
                case 'handleImportAllot':
                    alert('开发中!!!');
                    break;
                default:
                    break;
            }
        },
        //跳转选择分配设备页面
        handleSelectAllot() {
            this.$router.push({
                path: '/zutai/assignmentGallery',
            });
        },
    }
};
</script>
<style scoped>
/* .app-container .el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
} */
.sysImageZt {
    margin: 20px;
}

.image {
    width: 100px;
    height: 100px;
}

.selectRadioText {
    color: #ffff;
    padding: 5px;
    float: right;
}

.submenuClass {
    height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cardImage {
    width: 100px;
    height: 100px;
}

::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

::-webkit-scrollbar-track {
    background-color: #ddd;
}
</style>>
